<template>
  <div class="two">
    <div class="header">
      <header-tab/>
    </div>
    <div class="content">
      <product-tab/>
      <!--调和基础数据表-->
      <div class="tank_botor">
        <h2>调合基础数据表:</h2>
        <table>
          <thead>
          <th v-for="field in tankList" :key="field.name" :style="{wordBreak: field.nowrap ? 'keep-all' : 'normal'}">{{ field.label }}</th>
          <th style="width: 40px">操作</th>
          </thead>
          <tbody>
          <tr v-for="(item, index) in oilsData" :key="item.id">
            <td v-for="field in tankList" :key="field.name" style="padding: 0px">
              <input
                  type="text"
                  :class="field.name"
                  v-if="field.editable"
                  v-model="item[field.name]"
                  :placeholder="field.label"
                  :style="{width:field.width}"
              />
              <select v-else-if="field.selected" v-model="item[field.name]" :style="{width:field.width}">
                <option disabled value="">请选择</option>
                <option v-for="option in harmony_name" :key="option.value" :value="option.value">{{
                    option.label
                  }}
                </option>
              </select>
              <div :style="{width:field.width}" v-else>{{ item[field.name] }}</div>
            </td>
            <td>
              <button type="submit" class="btn-primary" @click="tankBotorOilTwoUpdate(item)">保存</button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="oils">
        <h2>罐底油性质表(如果不考虑罐底油，罐底油性质可不输):</h2>
        <table>
          <thead>
          <tr>
            <th v-for="field in oilsList" :key="field.name" :style="{wordBreak: field.nowrap ? 'keep-all' : 'normal'}">{{ field.label }}</th>
            <th style="width: 40px">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in oilsData" :key="item.id">
            <td v-for="field in oilsList" :key="field.name" style="padding: 0px">
              <input
                  type="text"
                  :class="field.name"
                  v-if="field.editable"
                  v-model="item[field.name]"
                  :placeholder="field.label"
                  :style="{width:field.width}"
              />
              <select v-else-if="field.selected" v-model="item[field.name]" :style="{width:field.width}">
                <option disabled value="">请选择</option>
                <option v-for="option in types" :key="option.value" :value="option.value">{{ option.label }}</option>
              </select>
              <div :style="{width:field.width}" v-else>{{ item[field.name] }}</div>
            </td>
            <td>
              <button type="submit" class="btn-primary-oils" @click="tankBotorOilTwoUpdate(item)">保存</button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--质量预估与过剩表(dynamicFields)-->
      <div class="dynamicFields">
        <h2>质量预估与过剩表:</h2>
        <table>
          <thead>
          <tr>
            <th style="width: 160px">质量预估与过剩表</th>
            <th v-for="field in dynamicFieldList" :key="field.name" :style="{wordBreak: field.nowrap ? 'keep-all' : 'normal'}">{{ field.label }}</th>
            <th style="width: 40px">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in dynamicFieldData" :key="item.id">
            <td class="name">产品指标下限(不要低于)</td>
            <td v-for="field in dynamicFieldList" :key="field.name" style="padding: 0px" >
              <input
                  type="text"
                  :class="field.name"
                  v-if="field.editable "
                  v-model="item[field.name]"
                  :placeholder="field.label"
                  :style="{width:field.width}"
              />
              <select v-else-if="field.selected" v-model="item[field.name]" :style="{width:field.width}">
                <option disabled value="">请选择</option>
                <option v-for="option in types" :key="option.value" :value="option.value">{{ option.label }}</option>
              </select>
              <div :style="{width:field.width}" v-else>{{ item[field.name] }}</div>
            </td>
            <td>
              <button @click="excessQualityTwoUpdate(item)">保存</button>
            </td>
          </tr>
          <tr v-for="(item, index) in dynamicFieldData" :key="item.id">
            <td class="name">产品指标上限(不要高于)</td>
            <td v-for="field in dynamicFieldList1" :key="field.name" style="padding: 0px">
              <input
                  type="text"
                  :class="field.name"
                  v-if="field.editable "
                  v-model="item[field.name]"
                  :placeholder="field.label"
                  :style="{width:field.width}"
              />
              <select v-else-if="field.selected" v-model="item[field.name]" :style="{width:field.width}">
                <option disabled value="">请选择</option>
                <option v-for="option in types" :key="option.value" :value="option.value">{{ option.label }}</option>
              </select>
              <div :style="{width:field.width}" v-else>{{ item[field.name] }}</div>
            </td>
            <td>
              <button @click="excessQualityTwoUpdate(item)">保存</button>
            </td>
          </tr>
          <tr v-for="(item, index) in dynamicFieldData" :key="item.id">
            <td class="name">云计算修正系数</td>
            <td v-for="field in dynamicFieldList2" :key="field.name" style="padding: 0px">
              <input
                  type="text"
                  :class="field.name"
                  v-if="field.editable"
                  v-model="item[field.name]"
                  :placeholder="field.label"
                  :style="{width:field.width}"
              />
              <select v-else-if="field.selected" v-model="item[field.name]" :style="{width:field.width}">
                <option disabled value="">请选择</option>
                <option v-for="option in types" :key="option.value" :value="option.value">{{ option.label }}</option>
              </select>
              <div :style="{width:field.width}" v-else>{{ item[field.name] }}</div>
            </td>
            <td>
              <button @click="excessQualityTwoUpdate(item)">保存</button>
            </td>
          </tr>
          <tr v-for="(item, index) in estimateCountTwoData" :key="item.id">
            <td>云计算预估产品性质</td>
            <td style="color: #409EFF;font-weight: bolder;padding: 0px;" v-for="field in fomulaCountTwoList" :key="field.name">
              <input
                  type="text"
                  :class="field.name"
                  v-if="field.editable"
                  v-model="item[field.name]"
                  :placeholder="field.label"
                  :style="{width:field.width}"
              />
              <select v-else-if="field.selected" v-model="item[field.name]" :style="{width:field.width}">
                <option disabled value="">请选择</option>
                <option v-for="option in types" :key="option.value" :value="option.value">{{ option.label }}</option>
              </select>
              <div :style="{width:field.width}" v-else>{{ item[field.name] }}</div>
            </td>
          </tr>
          <tr v-for="(item, index) in volumeCountTwoData" :key="item.id">
            <td>体积法线性预估产品性质</td>
            <td v-for="field in fomulaCountTwoList" :key="field.name" style="padding: 0px">
              <input
                  type="text"
                  :class="field.name"
                  v-if="field.editable"
                  v-model="item[field.name]"
                  :placeholder="field.label"
                  :style="{width:field.width}"
              />
              <select v-else-if="field.selected" v-model="item[field.name]" :style="{width:field.width}">
                <option disabled value="">请选择</option>
                <option v-for="option in types" :key="option.value" :value="option.value">{{ option.label }}</option>
              </select>
              <div :style="{width:field.width}" v-else>{{ item[field.name] }}</div>
            </td>
          </tr>
          <tr v-for="(item, index) in fomulaCountTwoData" :key="item.id">
            <td>质量法线性预估产品性质</td>
            <td v-for="field in fomulaCountTwoList" :key="field.name" style="padding: 0px">
              <input
                  type="text"
                  :class="field.name"
                  v-if="field.editable"
                  v-model="item[field.name]"
                  :placeholder="field.label"
                  :style="{width:field.width}"
              />
              <select v-else-if="field.selected" v-model="item[field.name]" :style="{width:field.width}">
                <option disabled value="">请选择</option>
                <option v-for="option in types" :key="option.value" :value="option.value">{{ option.label }}</option>
              </select>
              <div :style="{width:field.width}" v-else>{{ item[field.name] }}</div>
            </td>
          </tr>
          <tr v-for="(item, index) in estimateCountTwoData" :key="item.id">
            <td>产品大于指标下限质量过剩</td>
            <td v-for="field in fomulaCountTwoTop" :key="field.name" style="padding: 0px">
              <input
                  type="text"
                  :class="field.name"
                  v-if="field.editable"
                  v-model="item[field.name]"
                  :placeholder="field.label"
                  :style="{width:field.width}"
              />
              <select v-else-if="field.selected" v-model="item[field.name]" :style="{width:field.width}">
                <option disabled value="">请选择</option>
                <option v-for="option in types" :key="option.value" :value="option.value">{{ option.label }}</option>
              </select>
              <div :style="{width:field.name}" v-else>{{ item[field.name] }}</div>
            </td>
          </tr>
          <tr v-for="(item, index) in estimateCountTwoData" :key="item.id">
            <td>产品小于指标上限质量过剩</td>
            <td v-for="field in fomulaCountTwoUn" :key="field.name" style="padding: 0px">
              <input
                  type="text"
                  :class="field.name"
                  v-if="field.editable"
                  v-model="item[field.name]"
                  :placeholder="field.label"
                  :style="{width:field.width}"
              />
              <select v-else-if="field.selected" v-model="item[field.name]" :style="{width:field.width}">
                <option disabled value="">请选择</option>
                <option v-for="option in types" :key="option.value" :value="option.value">{{ option.label }}</option>
              </select>
              <div :style="{width:field.width}" v-else>{{ item[field.name] }}</div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <!--产品计算表-->
      <div class="count">
        <div class="count_title">
          <span>产品计算表:</span>
          <div class="count_button">
            <button @click="gasolineOneUpdate()" size="mini">保存以下数据</button>
            <button @click="gasolineTwoUpdateCount()" size="mini">经验质量配方预估产品性质和成本(免费使用)</button>
            <button class="button_show" size="mini">最低成本配方云计算求解(仅VIP2可用)</button>
            <span v-for="field in fomulaCountTwoData" class="countPrice">成本估算：<span>{{ field.price }}</span> 元/每吨</span>
          </div>
        </div>

        <table>
          <thead>
          <tr>
            <th v-for="field in fields" :key="field.name" :style="{wordBreak: field.nowrap ? 'keep-all' : 'normal'}">{{ field.label }}</th>
          </tr>
          </thead>
          <tbody>
          <tr class="sumNumber">
            <td>求和</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{ this.totalExp }}</td>
            <td></td>
            <td>{{ this.totalCarTon }}</td>
            <td>{{ this.totalDarTonNumber }}</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr v-for="(item, index) in data.list" :key="item.id">
            <td v-for="field in fields" :key="field.name" style="padding: 0px">
              <input
                  type="text"
                  :class="field.name"
                  v-if="field.editable"
                  v-model="item[field.name]"
                  :placeholder="field.label"
                  :style="{width:field.width}"
                  @blur="()=>calcExpFomula(field.name)"
              />
              <select v-else-if="field.selected" v-model="item[field.name]" :style="{width:field.width}">
                <option disabled value="">请选择</option>
                <option v-for="option in types" :key="option.value" :value="option.value">{{ option.label }}</option>
              </select>
              <div :style="{width:field.width}" v-else>{{ item[field.name] }}</div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>


<script>
import {gasolineOneFindAll, gasolineOneUpdate, gasolineExpFomula} from "@/api/gasoline";
import {
  tankBotorOilTwoFindAll,
  tankBotorOilTwoSave,
  tankBotorOilTwoUpdate,
  excessQualityTwoFindAll,
  excessQualityTwoSave,
  excessQualityTwoUpdate,
  gasolineTwoUpdateCount,
  fomulaCountTwoFindAll,
  fomulaCountTwoSave,
  volumeCountTwoFindAll,
  volumeCountTwoSave,
  estimateCountTwoFindAll,
  estimateCountTwoSave
} from '@/api/gasolinecountTwo'
import HeaderTab from "@/components/HeaderTab"
import ProductTab from "@/components/Product.vue"
import {getInfo} from "@/api/login";

export default {
  name: 'index',
  components: {
    HeaderTab,
    ProductTab
  },
  data() {
    return {
      totalExp: 100,
      totalCarTon: 0,
      totalDarTonNumber: 0,
      sums: [],


      form: {},
      item: {
        pageNum: 1,
        pageSize: 30,
        total: 0,
      },
      datas: [],
      newUser: {},
      // 调和基础数据表
      tankList: [
        {name: 'nameNumber', label: '产品罐号', editable: true, width:"40px"},
        {name: 'planNumber', label: '计划调合量(吨)', editable: true, width:"30px"},
        {name: 'minHarmony', label: '最小调合量（吨）', editable: true, width:"30px"},
        {name: 'maxHarmony', label: '最大调合量（吨）', editable: true, width:"30px"},
        {name: 'tankBotorNumber', label: '罐底量（吨）(如果不考虑罐底油，罐底量输入为0)', editable: true, width:"30px"},
      ],
      tankData: [],
      //罐底油
      tank_botor: [],
      oilsList: [
        {name: 'price', label: '价格', editable: true, width:"40px"},
        {name: 'density', label: '密度', editable: true, width:"40px"},
        {name: 'studyOctane', label: '研究法辛烷值', editable: true, width:"40px"},
        {name: 'motorOctane', label: '马达法辛烷值', editable: true, width:"40px"},
        {name: 'olefins', label: '烯烃', editable: true, width:"40px"},
        {name: 'aromatic', label: '芳烃', editable: true, width:"40px"},
        {name: 'sulphur', label: '硫含量', editable: true, width:"40px"},
        {name: 'steams', label: '蒸汽压', editable: true, width:"40px"},
        {name: 'oxidation', label: '氧含量', editable: true, width:"40px"},
        {name: 'benzene', label: '苯', editable: true, width:"40px"},
        {name: 'littleRange', label: '10%馏程', editable: true, width:"40px"},
        {name: 'halfRange', label: '50%馏程', editable: true, width:"40px"},
        {name: 'mostRange', label: '90%馏程', editable: true, width:"40px"},
        {name: 'allRange', label: '终馏点', editable: true, width:"40px"},
      ],
      oilsData: [],
      //质量预估与过剩表
      dynamicFieldList: [
        {name: 'density', label: '密度', editable: true},
        {name: 'studyOctane', label: '研究法辛烷值', editable: true},
        {name: 'blastNumber', label: '抗爆指数', editable: true},
        {name: 'olefins', label: '烯烃', editable: true},
        {name: 'aromatic', label: '芳烃', editable: true},
        {name: 'sulphur', label: '硫含量', editable: true},
        {name: 'steams', label: '蒸汽压', editable: true},
        {name: 'oxidation', label: '氧含量', editable: true},
        {name: 'beanzene', label: '苯', editable: true},
        {name: 'littleRange', label: '10%馏程', editable: true},
        {name: 'halfRange', label: '50%馏程', editable: true},
        {name: 'mostRange', label: '90%馏程', editable: true},
        {name: 'allRange', label: '终馏点', editable: true},
        {name: 'blastSensitivity', label: '抗爆敏感性', editable: true},
        {name: '', label: '马达法辛烷值', editable: false},
      ],
      dynamicFieldList1: [
        {name: 'density1', label: '密度', editable: true, width:"40px"},
        {name: 'studyOctane1', label: '研究法辛烷值', editable: true, width:"40px"},
        {name: 'blastNumber1', label: '抗爆指数', editable: true, width:"40px"},
        {name: 'olefins1', label: '烯烃', editable: true, width:"40px"},
        {name: 'aromatic1', label: '芳烃', editable: true, width:"40px"},
        {name: 'sulphur1', label: '硫含量', editable: true, width:"40px"},
        {name: 'steams1', label: '蒸汽压', editable: true, width:"40px"},
        {name: 'oxidation1', label: '氧含量', editable: true, width:"40px"},
        {name: 'benzene1', label: '苯', editable: true, width:"40px"},
        {name: 'littleRange1', label: '10%馏程', editable: true, width:"40px"},
        {name: 'halfRange1', label: '50%馏程', editable: true, width:"40px"},
        {name: 'mostRange1', label: '90%馏程', editable: true, width:"40px"},
        {name: 'allRange1', label: '终馏点', editable: true, width:"40px"},
        {name: 'blastSensitivity1', label: '抗爆敏感性', editable: true, width:"40px"},
        {name: '', label: '马达法辛烷值', editable: false, width:"40px"},
      ],
      dynamicFieldList2: [
        {name: 'density2', label: '密度', editable: true, width:"40px"},
        {name: 'studyOctane2', label: '研究法辛烷值', editable: true, width:"40px"},
        {name: 'blastNumber2', label: '抗爆指数', editable: false, width:"40px"},
        {name: 'olefins2', label: '烯烃', editable: true, width:"40px"},
        {name: 'aromatic2', label: '芳烃', editable: true, width:"40px"},
        {name: 'sulphur2', label: '硫含量', editable: true, width:"40px"},
        {name: 'steams2', label: '蒸汽压', editable: true, width:"40px"},
        {name: 'oxidation2', label: '氧含量', editable: true, width:"40px"},
        {name: 'benzene2', label: '苯', editable: true, width:"40px"},
        {name: 'littleRange2', label: '10%馏程', editable: true, width:"40px"},
        {name: 'halfRange2', label: '50%馏程', editable: true, width:"40px"},
        {name: 'mostRange2', label: '90%馏程', editable: true, width:"40px"},
        {name: 'allRange2', label: '终馏点', editable: true, width:"40px"},
        {name: 'blastSensitivity2', label: '抗爆敏感性', editable: false, width:"40px"},
        {name: 'motorOctane', label: '马达法辛烷值', editable: true, width:"40px"},
      ],
      dynamicFieldData: [],
      //产品性质云计算预估
      fomulaCountTwoList: [
        {name: 'density', label: '密度', editable: false, width:"40px"},
        {name: 'studyOctane', label: '研究法辛烷值', editable: false, width:"40px"},
        {name: 'blastNumber', label: '抗爆指数', editable: false, width:"40px"},
        {name: 'olefins', label: '烯烃', editable: false, width:"40px"},
        {name: 'aromatic', label: '芳烃', editable: false, width:"40px"},
        {name: 'sulphur', label: '硫含量', editable: false, width:"40px"},
        {name: 'steams', label: '蒸汽压', editable: false, width:"40px"},
        {name: 'oxidation', label: '氧含量', editable: false, width:"40px"},
        {name: 'benzene', label: '苯', editable: false, width:"40px"},
        {name: 'littleRange', label: '10%馏程', editable: false, width:"40px"},
        {name: 'halfRange', label: '50%馏程', editable: false, width:"40px"},
        {name: 'mostRange', label: '90%馏程', editable: false, width:"40px"},
        {name: 'allRange', label: '终馏点', editable: false, width:"40px"},
        {name: 'blastSensitivity', label: '抗爆敏感性', editable: false, width:"40px"},
      ],
      fomulaCountTwoTop: [
        {name: 'topDensity', label: '密度', editable: false, width:"40px"},
        {name: 'topStudyOctane', label: '研究法辛烷值', editable: false, width:"40px"},
        {name: 'topBlastNumber', label: '抗爆指数', editable: false, width:"40px"},
        {name: 'topOlefins', label: '烯烃', editable: false, width:"40px"},
        {name: 'topAromatic', label: '芳烃', editable: false, width:"40px"},
        {name: 'topSulphur', label: '硫含量', editable: false, width:"40px"},
        {name: 'topSteams', label: '蒸汽压', editable: false, width:"40px"},
        {name: 'topOxidation', label: '氧含量', editable: false, width:"40px"},
        {name: 'topBenzene', label: '苯', editable: false, width:"40px"},
        {name: 'topLittleRange', label: '10%馏程', editable: false, width:"40px"},
        {name: 'topHalfRange', label: '50%馏程', editable: false, width:"40px"},
        {name: 'topMostRange', label: '90%馏程', editable: false, width:"40px"},
        {name: 'topAllRange', label: '终馏点', editable: false, width:"40px"},
        {name: 'topBlastSensitivity', label: '抗爆敏感性', editable: false, width:"40px"},
      ],
      fomulaCountTwoUn: [
        {name: 'unDensity', label: '密度', editable: false, width:"40px"},
        {name: 'unStudyOctane', label: '研究法辛烷值', editable: false, width:"40px"},
        {name: 'unBlastNumber', label: '抗爆指数', editable: false, width:"40px"},
        {name: 'unOlefins', label: '烯烃', editable: false, width:"40px"},
        {name: 'unAromatic', label: '芳烃', editable: false, width:"40px"},
        {name: 'unSulphur', label: '硫含量', editable: false, width:"40px"},
        {name: 'unSteams', label: '蒸汽压', editable: false, width:"40px"},
        {name: 'unOxidation', label: '氧含量', editable: false, width:"40px"},
        {name: 'unBenzene', label: '苯', editable: false, width:"40px"},
        {name: 'unLittleRange', label: '10%馏程', editable: false, width:"40px"},
        {name: 'unHalfRange', label: '50%馏程', editable: false, width:"40px"},
        {name: 'unMostRange', label: '90%馏程', editable: false, width:"40px"},
        {name: 'unAllRange', label: '终馏点', editable: false, width:"40px"},
        {name: 'unBlastSensitivity', label: '抗爆敏感性', editable: false, width:"40px"},
      ],
      fomulaCountTwoData: [],
      volumeCountTwoData: [],
      estimateCountTwoData: [],
      types: [
        {value: '否', label: '否', selected: false},
        {value: '是', label: '是'},
      ],
      data: {
        list: []
      },
      fields: [
        {name: 'countId', label: '序号', editable: false, width:"40px"},
        {name: 'gasolineName', label: '组分名称', editable: false, width:"60px"},
        {name: 'ifCar', label: '是否整车数(外购原料直接进调合罐需要整车,自产原料不需要整车)', selected: true, width:"80px"},
        {name: 'carCount', label: '最大用车数(用为200,不用为0)', editable: true, width:"40px"},
        {name: 'tonCount', label: '每车吨数(默认为32)', editable: true, width:"40px"},
        {name: 'lowFomula', label: '最低质量配方(罐存约束)', editable: true, width:"40px"},
        {name: 'highFomula', label: '最高质量配方(罐存约束)', editable: true, width:"40px"},
        {name: 'expFomula', label: '经验质量配方(和必须是100)', editable: true, width:"40px"},
        {name: 'qualityNo', label: '云计算优化质量配方(不含罐底)', editable: false, width:"40px"},
        {name: 'carTon', label: '汽油各组分用量(吨)', editable: false, width:"40px"},
        {name: 'darTonNumber', label: '各组分计算用车数', editable: false, width:"40px"},
        {name: 'price', label: '组分价格(元/吨)', editable: false, width:"40px"},
        {name: 'density', label: '密度', editable: false, width:"40px"},
        {name: 'studyOctane', label: '研究法辛烷值', editable: false, width:"40px"},
        {name: 'blastNumber', label: '抗爆指数', editable: false, width:"40px"},
        {name: 'olefins', label: '烯烃', editable: false, width:"40px"},
        {name: 'aromatic', label: '芳烃', editable: false, width:"40px"},
        {name: 'sulphur', label: '硫含量', editable: false, width:"40px"},
        {name: 'steams', label: '蒸汽压', editable: false, width:"40px"},
        {name: 'oxidation', label: '氧含量', editable: false, width:"40px"},
        {name: 'benzene', label: '苯', editable: false, width:"40px"},
        {name: 'littleRange', label: '10%馏程', editable: false, width:"40px"},
        {name: 'halfRange', label: '50%馏程', editable: false, width:"40px"},
        {name: 'mostRange', label: '90%馏程', editable: false, width:"40px"},
        {name: 'allRange', label: '终馏点', editable: false, width:"40px"},
        {name: 'blastSensitivity', label: '抗爆敏感性', editable: false, width:"40px"},
      ],
    }
  },
  created() {
    // this.showUser()
    this.fechtData();
    this.tankBotorOilTwoFindAll()
    this.tankBotorOilTwoSave()
    this.excessQualityTwoFindAll()
    this.excessQualityTwoSave()
    this.fomulaCountTwoFindAll()
    this.fomulaCountTwoSave()
    this.volumeCountTwoFindAll()
    this.volumeCountTwoSave()
    this.estimateCountTwoFindAll()
    this.estimateCountTwoSave();
  },

  methods: {
    //todo  新增showUser，记得改
    // showUser() {
    //   getInfo().then((res) => {
    //     this.user = res.data.user
    //   })
    // },
    // 罐底油
    fechtData() {
      gasolineOneFindAll(this.item).then((res) => {
        this.data = res.data.gasolineOnePageInfo;
        this.calcExpFomula()
      }).catch((error) => {
        alert("请检查网络")
      })
    },
    gasolineOneUpdate() {
      const items = this.data.list.map(item => ({
        id: item.id,
        area: item.area,
        bussiness: item.bussiness,
        gasolineName: item.gasolineName,
        type: item.type,
        price: item.price,
        density: item.density,
        studyOctane: item.studyOctane,
        motorOctane: item.motorOctane,
        olefins: item.olefins,
        aromatic: item.aromatic,
        sulphur: item.sulphur,
        steams: item.steams,
        oxidation: item.oxidation,
        benzene: item.benzene,
        littleRange: item.littleRange,
        halfRange: item.halfRange,
        mostRange: item.mostRange,
        allRange: item.allRange,
        enterName: item.enterName,
        phone: item.phone,
        ifCar1: item.ifCar1,
        carCount1: item.carCount1,
        tonCount1: item.tonCount1,
        lowFomula1: item.lowFomula1,
        highFomula1: item.highFomula1,
        expFomula1: item.expFomula1
      }));
      gasolineOneUpdate(items).then((res) => {
        this.$message(res.message)
        this.fechtData();
      }).catch((error) => {
        alert("请检查网络")
      })
    },
    gasolineTwoUpdateCount() {
      const items = this.data.list.map(item => ({
        id: item.id,
        area: item.area,
        bussiness: item.bussiness,
        gasolineName: item.gasolineName,
        type: item.type,
        price: item.price,
        density: item.density,
        studyOctane: item.studyOctane,
        motorOctane: item.motorOctane,
        olefins: item.olefins,
        aromatic: item.aromatic,
        sulphur: item.sulphur,
        steams: item.steams,
        oxidation: item.oxidation,
        benzene: item.benzene,
        littleRange: item.littleRange,
        halfRange: item.halfRange,
        mostRange: item.mostRange,
        allRange: item.allRange,
        enterName: item.enterName,
        phone: item.phone,
        ifCar1: item.ifCar1,
        carCount1: item.carCount1,
        tonCount1: item.tonCount1,
        lowFomula1: item.lowFomula1,
        highFomula1: item.highFomula1,
        expFomula1: item.expFomula1
      }));
      gasolineTwoUpdateCount(items).then((res) => {

        this.$message(res.message)
        this.fomulaCountTwoFindAll()
        this.volumeCountTwoFindAll()
        this.fechtData()
        this.estimateCountTwoFindAll()
      }).catch((error) => {
        alert("请检查网络")
      })
    },
    tankBotorOilTwoFindAll() {
      tankBotorOilTwoFindAll().then((res) => {
        this.oilsData = res.data.tankBotorOilTwoList;
      }).catch((error) => {
        alert("请检查网络")
      })
    },
    tankBotorOilTwoSave() {
      tankBotorOilTwoSave(this.item).then((res) => {
        this.tankBotorOilTwoFindAll();
      }).catch((error) => {
        alert("请检查网络")
      })
    },
    tankBotorOilTwoUpdate(row) {
      let data = {
        id: row.id,
        harmonyName: row.harmonyName,
        nameNumber: row.nameNumber,
        planNumber: row.planNumber,
        minHarmony: row.minHarmony,
        maxHarmony: row.maxHarmony,
        tankBotorNumber: row.tankBotorNumber,
        price: row.price,
        density: row.density,
        studyOctane: row.studyOctane,
        motorOctane: row.motorOctane,
        olefins: row.olefins,
        aromatic: row.aromatic,
        sulphur: row.sulphur,
        steams: row.steams,
        oxidation: row.oxidation,
        benzene: row.benzene,
        littleRange: row.littleRange,
        halfRange: row.halfRange,
        mostRange: row.mostRange,
        allRange: row.allRange
      }
      tankBotorOilTwoUpdate(data).then((res) => {
        this.$message(res.message)
        this.tankBotorOilTwoFindAll();
      }).catch(error => {
        alert("请检查网络")
      })
    },
    excessQualityTwoFindAll() {
      excessQualityTwoFindAll().then((res) => {
        this.dynamicFieldData = res.data.excessQualityTwoList;
        this.dynamicFieldData1 = res.data.excessQualityTwoList;
        this.dynamicFieldData2 = res.data.excessQualityTwoList;
      }).catch((error) => {
        alert("请检查网络")
      })
    },
    excessQualityTwoSave() {
      excessQualityTwoSave(this.item).then((res) => {
        this.excessQualityTwoFindAll();
      }).catch((error) => {
        alert("请检查网络")
      })
    },
    excessQualityTwoUpdate(row) {
      let data = {
        id: row.id,
        density1: row.density1,
        studyOctane1: row.studyOctane1,
        blastNumber1: row.blastNumber1,
        olefins1: row.olefins1,
        aromatic1: row.aromatic1,
        sulphur1: row.sulphur1,
        steams1: row.steams1,
        oxidation1: row.oxidation1,
        beanzene1: row.beanzene1,
        littleRange1: row.littleRange1,
        halfRange1: row.halfRange1,
        mostRange1: row.mostRange1,
        allRange1: row.allRange1,
        blastSensitivity1: row.blastSensitivity1,
        density2: row.density2,
        studyOctane2: row.studyOctane2,
        olefins2: row.olefins2,
        aromatic2: row.aromatic2,
        sulphur2: row.sulphur2,
        steams2: row.steams2,
        oxidation2: row.oxidation2,
        beanzene2: row.beanzene2,
        littleRange2: row.littleRange2,
        halfRange2: row.halfRange2,
        mostRange2: row.mostRange2,
        allRange2: row.allRange2,
        density: row.density,
        studyOctane: row.studyOctane,
        blastNumber: row.blastNumber,
        olefins: row.olefins,
        aromatic: row.aromatic,
        sulphur: row.sulphur,
        steams: row.steams,
        oxidation: row.oxidation,
        beanzene: row.beanzene,
        littleRange: row.littleRange,
        halfRange: row.halfRange,
        mostRange: row.mostRange,
        allRange: row.allRange,
        blastSensitivity: row.blastSensitivity,
        motorOctane: row.motorOctane
      }
      excessQualityTwoUpdate(data).then((res) => {
        this.$message(res.message)
        this.excessQualityTwoFindAll();
      }).catch(error => {
        alert("请检查网络")
      })
    },
    fomulaCountTwoFindAll() {
      fomulaCountTwoFindAll().then((res) => {
        this.fomulaCountTwoData = res.data.fomulaCountTwoList
      }).catch(error => {
        alert("请检查网络")
      })
    },
    fomulaCountTwoSave() {
      fomulaCountTwoSave(this.item).then(res => {
        this.fomulaCountTwoFindAll()
      }).catch(error => {
        alert("请检查网络")
      })
    },
    volumeCountTwoFindAll() {
      volumeCountTwoFindAll().then(res => {
        this.volumeCountTwoData = res.data.volumeCountTwoList
      }).catch(error => {
        alert("请检查网络")
      })
    },
    volumeCountTwoSave() {
      volumeCountTwoSave(this.item).then(res => {
        this.volumeCountTwoFindAll()
      }).catch(error => {
        alert("请检查网络")
      })
    },
    estimateCountTwoFindAll() {
      estimateCountTwoFindAll().then(res => {
        this.estimateCountTwoData = res.data.estimateCountTwoList
      })
    },
    estimateCountTwoSave() {
      estimateCountTwoSave(this.item).then(res => {
        this.estimateCountTwoFindAll()
      })
    },
    calcExpFomula(name) {
      if ((name && name == "expFomula1") || !name) {
        const list = this.data.list || []
        let total = 0
        let total1 = 0
        let total2 = 0
        list.forEach(item => {
          total += (parseFloat(item.expFomula1) || 0)
          total1 += (parseFloat(item.carTon1) || 0)
          total2 += (parseFloat(item.darTonNumber1) || 0)
        })
        this.totalExp = total.toFixed(2)
        this.totalCarTon = total1.toFixed(2)
        this.totalDarTonNumber = total2.toFixed(2)
      }
    }
  }
}
</script>

<style scoped>
.two{
  width: 100%;
  overflow: hidden;
}
.content{
  overflow: auto;
  margin: 0px;
  padding: 0px;
}
h2 {
  float: left;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
  margin-left: 10px;
}
.count_title{
  display:flex;
  justify-content:space-between;
  height:40px;
  line-height:40px;
  min-width: 1000px;
  font-size: 12px;
}
.count_button button {
  margin-left: 20px;
}
.button_show {
  background-color: #EBB563;
  border: none;
  width: 250px;
  height: 25px;
  color: white;
  margin-bottom: 10px;
  margin-left: 20px;
  border-radius: 3px;
}
.count_button .countPrice {
  font-size: 12px;
  margin-left: 20px;
}
.count_button .countPrice span{
  font-size: 15px;
  color: #409EFF;
  font-weight: bolder;
  padding-left: 0px;
}

.content table {
  width: 100%;
  border-collapse: collapse;
}

.content table tr {
  width: 10px;
}

.content table th, table td {
  height: 15px;
  border: 1px solid #e6e6e6;
  padding: 0px;
  text-align: center;
  font-size: 12px;
  color: #000000;
  font-weight: normal;
}
.content table input {
  width: 55px;
  text-align: center;
  border: #e9e9e9 1px solid;
}

.content table button {
  border: none;
  background-color: white;
}

.tank_botor{
  width: 560px;
}
.oils{
  width: 770px;
}
.dynamicFields {
  width: 1110px;
}
</style>

